﻿@page "/AntDesignChart"

@using AntDesign.Charts


<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<link antblazor-css />


<AntDesign.Charts.Line @ref="@chart" Data="data" Config="config">

</AntDesign.Charts.Line>

<!-- AntDesign -->
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
<script antblazor-js></script>
<script src="_content/AntDesign.Charts/g2plot.min.js"></script>
<script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>

@code {
    IChartComponent chart;
    List<FireworksSalesItem> data = new List<FireworksSalesItem>();

    LineConfig config = new LineConfig
    {
        Title = new AntDesign.Charts.Title
        {
            Visible = true,
            Text = "单折线图的基础用法"
        },
        Description = new Description
        {
            Visible = true,
            Text = "最基础简单的折线图使用方式，显示一个指标的趋势"
        },
        ForceFit = true,
        Padding = "auto",
        XField = "Date",
        YField = "scales",
        // XAxis = new ValueCatTimeAxis
        // {
        //     Type = "dateTime",
        //     TickCount = 5
        // }
    };

    protected override async Task OnInitializedAsync()
    {
        for (int i = 0; i < 5000; i++)
        {
            data.Add(new FireworksSalesItem
            {
                date = i.ToString(),
                value = i,
            });
        }
        await chart.ChangeData(data);
        await base.OnInitializedAsync();
    }

    public class FireworksSalesItem
    {
        public string date { get; set; }
        public double value { get; set; }
    }
}
